import React, { Component } from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "../pages/Home";
import Login from "../pages/Login";

import { Provider } from "react-redux";
import { createStore, combineReducers, compose, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import * as homeReducer from "@store/home/reducer";
import * as loginReducer from "@store/login/reducer";
import { watchLoginAsyn } from "@store/login/sagas";
function App() {
  let home = homeReducer.home;
  let login = loginReducer.login;
  const sagaMiddleware = createSagaMiddleware();
  const composeEnhancer =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(
    combineReducers({
      home,
      login
    }),
    composeEnhancer(applyMiddleware(sagaMiddleware))
  );
  sagaMiddleware.run(watchLoginAsyn);
  return (
    <Router>
      <div>
        <Header />
        <Provider store={store}>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={Login} />
          <Route path="/topics" component={Topics} />
        </Provider>
      </div>
    </Router>
  );
}

function About() {
  return <h2>About</h2>;
}

function Topic({ match }) {
  return <h3>Requested Param: {match.params.id}</h3>;
}

function Topics({ match }) {
  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Route path={`${match.path}/:id`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

function Header() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
    </ul>
  );
}

export default App;
